<script setup lang="ts">
import type { StatisticalIndicator } from '@/types/modules/statistical-indicator'
import StorageModeCell from '@/views/StatisticalIndicators/components/StorageModeCell.vue'

defineProps<{
  data: StatisticalIndicator[]
}>()
</script>

<template>
  <ElTable
    :data="data"
    stripe scrollbar-always-on
    border
    height="193px"
    style="
      width: 100%;
      --el-table-header-bg-color: var(--el-bg-color-page);
    "
  >
    <ElTableColumn
      label="指标名称"
      prop="indicatorName"
      align="center"
      width="120px"
      fixed
    />
    <ElTableColumn
      label="指标编码"
      prop="indicatorNumber"
      align="center"
      width="120px"
    />
    <ElTableColumn
      label="所属用能单元"
      prop="pointFullName"
      align="center"
      width="200px"
    />
    <ElTableColumn
      label="存储周期"
      prop="storageMode"
      width="300px"
      align="center"
    >
      <template #default="{ row }">
        <StorageModeCell :mode="row.storageMode" />
      </template>
    </ElTableColumn>
    <ElTableColumn
      label="计量单位"
      prop="unitName"
      align="center"
      width="120px"
    />
    <ElTableColumn
      label="倍率"
      prop="indicatorMultiple"
      align="center"
    />
  </ElTable>
</template>
